import React, {Component} from 'react';
import './App.css';
import Immutable from 'immutable'
import Utils from "./Utils";

const utils = new Utils();
class ListOfWords extends React.PureComponent {

  render() {
    // let entries = this.props.students.values();
    console.log(this.props.students);
    const show = [];
    Object.keys(this.props.students).forEach(
        id => {
          console.log(id,this.props.students[id])
          show.push(<div key={id}>{this.props.students[id].name}</div>)
        });
    return <div>{show}</div>;
  }
}
class ImmListOfWords extends React.PureComponent {

  render() {
    // let entries = this.props.students.values();
    // console.log(this.props.students);
    //     // const show = [];
    //     // Object.keys(this.props.students).forEach(
    //     //     id => {
    //     //       console.log(id,this.props.students[id])
    //     //       show.push(<div key={id}>{this.props.students[id].name}</div>)
    //     //     });
    return <div></div>;
  }
}
class TodosComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      immStudents: Immutable.fromJS({}),
      students: {}
    };
    this.initData();
    this.handleClickWithImmutable = this.handleClickWithImmutable.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  initData() {
    // {
    //   '1':{name:'name'},
    //   '2':{name:'name'}
    // }
    utils.time();
    let length = 600000;
    for (let i = 0; i < length; i++) {
      this.state.students[`${i}`] = {name: `同学-${i}`};
    }
    utils.time('普通初始化耗时');
    for (let i = 0; i < length; i++) {
      this.state.immStudents = this.state.immStudents.set(
          `${i}`,
          {name: `同学-${i}`}
      )
    }
    utils.time('immutable初始化耗时');

    console.log(this.state.students);
    console.log(this.state.immStudents);
  }

  handleClickWithImmutable() {
    utils.time();
    let immWords = this.state.immStudents;
    let id = '50000';
    let immStudents = immWords.set('50000', {name: immWords.get(id).name+'ok'});
    this.setState(
        {immStudents: immStudents});
    console.log('改变后的学生', immStudents.get('50000'));
    utils.time('Immutable耗时');
  }

  handleClick() {
    const students = this.state.students;
    utils.time();
    let id = '50000';
    let assign = Object.assign({}, students, {
      [id]: Object.assign({}, students[id], {
        name: students[id].name + "ok"
      })
    });
    console.log('改变后的学生', assign['50000']);
    utils.time('普通方法耗时');
    this.setState({students: assign});
  }


  render() {
    // console.log(this.state.immStudents.get(50000));
    return (
        <>
          <div className={'App'}>
            <button onClick={this.handleClickWithImmutable}>使用Immutable</button>
          </div>
          <ImmListOfWords students={this.state.immStudents}/>

          <div className={'App'}>
            <button onClick={this.handleClick}>使用普通方法</button>
          </div>
          {/*<ListOfWords students={this.state.students}/>*/}
        </>
    );
  }
}

export default TodosComponent;
